<template>
    <div class="appeal-form-container">
        <!-- 顶部导航链接 -->
        <div class="header-actions">
            <router-link to="/main/renshi/jixiao">返回绩效</router-link>
            <router-link to="/main/renshi/jixiao/jxshensuList">列表</router-link>
        </div>
        <!-- 表单标题 -->
        <h2 class="form-title">绩效考评申诉表</h2>
        <!-- 基础信息表格 -->
        <table class="info-table" border="1">
            <tr>
                <td>姓 名</td>
                <td><input v-model="formData.name" :disabled="isView" /></td>
                <td>职 位</td>
                <td><input v-model="formData.position" :disabled="isView" /></td>
                <td>部 门</td>
                <td><input v-model="formData.department" :disabled="isView" /></td>
            </tr>
            <tr>
                <td>入职日期</td>
                <td><input v-model="formData.entryDate" type="date" :disabled="isView" :min="minEntryDate"
                        @change="handleEntryDateChange" /></td>
                <td>申诉日期</td>
                <td><input v-model="formData.appealDate" type="datetime-local" :disabled="isView"
                        :min="minAppealDate" /></td>
                <td>申诉人直接上司</td>
                <td><input v-model="formData.directSuperior" :disabled="isView" /></td>
            </tr>
        </table>
        <!-- 详细信息表格 -->
        <table class="detail-table" border="1">
            <tr>
                <td>申诉原因：</td>
                <td colspan="5"><textarea v-model="formData.appealReason" style="height: 100px;"
                        :disabled="isView"></textarea></td>
            </tr>
            <tr>
                <td>申诉事项描述：</td>
                <td colspan="5"><textarea v-model="formData.appealDescription" style="height: 100px;"
                        :disabled="isView"></textarea></td>
            </tr>
            <tr>
                <td>申诉处理结果：</td>
                <td colspan="5"><textarea v-model="formData.appealResult" style="height: 100px;"
                        :disabled="isView"></textarea></td>
            </tr>
            <tr>
                <td>处理人：</td>
                <td><input v-model="formData.handler" :disabled="isView" /></td>
                <td colspan="">确认人：</td>
                <td colspan="3"><input v-model="formData.confirmor" :disabled="isView" /></td>
            </tr>
            <tr>
                <td>申诉处理结果验证：</td>
                <td colspan="5"><textarea v-model="formData.resultVerification" style="height: 100px;"
                        :disabled="isView"></textarea></td>
            </tr>
            <tr>
                <td>结案日期</td>
                <td><input v-model="formData.closeDate" type="date" :disabled="isView" :min="minCloseDate" /></td>
                <td>验证人</td>
                <td><input v-model="formData.verifier" :disabled="isView" /></td>
                <td>日期</td>
                <td><input v-model="formData.verificationDate" type="date" :disabled="isView"
                        :min="minVerificationDate" /></td>
            </tr>
        </table>
        <!-- 表单编号及保存期限信息 -->
        <p class="form-info"><span>表单编号及版本：AM-JY-245 A/0</span> <span>保存期限：长期</span></p>
        <!-- 保存按钮 -->
        <el-button v-if="!isView" type="primary" @click="saveData" class="save-button">保存</el-button>
    </div>
</template>

<script>
import { savePerformanceAppeal, getPerformanceAppealDetail } from '@/api/performanceAppeal'
import { formatDate, formatDateTime } from '@/utils/date'

export default {
    data() {
        const now = new Date();
        const currentDate = formatDate(now);
        const currentDateTime = formatDateTime(now);
        return {
            isView: false,
            formData: {
                id: null,
                name: '',
                position: '',
                department: '',
                entryDate: currentDate,
                appealDate: currentDateTime,
                directSuperior: '',
                appealReason: '',
                appealDescription: '',
                appealResult: '',
                handler: '',
                confirmor: '',
                resultVerification: '',
                closeDate: '',
                verifier: '',
                verificationDate: ''
            },
            minEntryDate: '1900-01-01',
            minAppealDate: currentDate + 'T00:00',
            minCloseDate: currentDate,
            minVerificationDate: currentDate
        };
    },
    async created() {
        const { id, mode } = this.$route.query
        this.isView = mode === 'view'

        if (id) {
            await this.fetchDetail(id)
        }
    },
    methods: {
        async fetchDetail(id) {
            try {
                const response = await getPerformanceAppealDetail(id)
                const data = response.data;
                if (Array.isArray(data.closeDate) && data.closeDate.length === 3) {
                    const [year, month, day] = data.closeDate;
                    data.closeDate = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
                }
                this.formData = data;
            } catch (error) {
                this.$message.error('获取详情失败：' + error.message)
            }
        },
        async saveData() {
            try {
                if (!this.formData.name) throw new Error('请填写姓名')
                if (!this.formData.appealDate) throw new Error('请选择申诉日期')
                if (!this.formData.directSuperior) throw new Error('请填写申诉人直接上司')
                if (!this.formData.appealReason) throw new Error('请填写申诉原因')
                if (!this.formData.appealDescription) throw new Error('请填写申诉事项描述')
                if (!this.formData.appealResult) throw new Error('请填写申诉处理结果')
                if (!this.formData.handler) throw new Error('请填写处理人')
                if (!this.formData.confirmor) throw new Error('请填写确认人')
                if (!this.formData.resultVerification) throw new Error('请填写申诉处理结果验证')
                if (!this.formData.closeDate) throw new Error('请填写结案日期')
                if (!this.formData.verifier) throw new Error('请填写验证人')
                if (!this.formData.verificationDate) throw new Error('请填写日期')

                this.formData.entryDate = formatDate(this.formData.entryDate)
                this.formData.appealDate = formatDateTime(this.formData.appealDate)
                this.formData.closeDate = formatDate(this.formData.closeDate)
                this.formData.verificationDate = formatDate(this.formData.verificationDate)
                // 确保保存时日期格式正确
                const formDataToSave = {
                    ...this.formData,
                };

                await savePerformanceAppeal(formDataToSave)
                this.$message.success('保存成功')
                this.$router.push('/main/renshi/jixiao/jxshensuList')
            } catch (error) {
                this.$message.error('保存失败：' + error.message)
            }
        },
        handleEntryDateChange() {
            this.minAppealDate = this.formData.entryDate + 'T00:00';
            this.minCloseDate = this.formData.entryDate;
            this.minVerificationDate = this.formData.entryDate;
        }
    }
};
</script>

<style scoped>
/* 整个表单容器样式 */
.appeal-form-container {
    font-family: '宋体', sans-serif;
    padding: 20px;
     background-color: #f9f9f9; 
    border-radius: 8px;
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
    margin: 20px;
    width: 1200px;
    margin: 0 auto;
    min-height: calc(100vh - 40px);

}

/* 顶部导航链接样式 */
.header-actions {
    display: flex;
    padding: 0px 10px;
    gap: 20px;
}

/* 表单标题样式 */
.form-title {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

/* 基础信息表格样式 */
.info-table {
    border-collapse: collapse;
    width: 100%;
    /* margin-bottom: 20px; */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

/* 详细信息表格样式 */
.detail-table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

/* 表格表头和单元格样式 */
th,
td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: center;
}

/* 表格表头样式 */
th {
    background-color: #f2f2f2;
}

/* 输入框样式 */
input {
    width: 90%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    outline: none;
}

/* 文本域样式 */
textarea {
    width: 98%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: vertical;
    outline: none;
}

/* 禁用输入框和文本域样式 */
input[disabled],
textarea[disabled] {
    background-color: #f5f7fa;
    border-color: #e4e7ed;
    color: #606266;
    cursor: not-allowed;
}

/* 表单编号及保存期限信息样式 */
.form-info {
    color: #757575;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
}

/* 保存按钮样式 */
.save-button {
    width: 100%;
    padding: 10px;
    border-radius: 4px;
}
</style>